<template>
  <el-dialog
    title="选择指定成员"
    :visible.sync="visibleDialog"
    width="600px"
    append-to-body
    class="promoter_person"
  >
    <div class="person_body clear">
      <div class="person_tree l">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText">
        </el-input>
        <el-tabs v-model="activeName">
          <el-tab-pane label="指定成员" name="1">
            <el-tree
              :data="memberList"
              show-checkbox
              node-key="id"
              :load="loadNode"
              ref="treeA"
              default-expand-all
              highlight-current
              :filter-node-method="filterNode"
              :props="defaultProps"
              @check="currentChecked"
              @check-change="handleCheckChange"
            >
            </el-tree>
            <div class="pagination-el">
              <el-pagination
                small
                layout="prev, pager, next"
                @current-change="handleCurrentChange"
                :total="memberTotal"
              >
              </el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="has_selected l">
        <p class="clear">
          已选（{{ total }}）
          <a @click="delList">清空</a>
        </p>
        <ul>
          <li v-for="(item, index) in checkedRoleList" :key="index + 'e'">
            <img src="@/assets/images/icon_role.png" />
            <span>{{ item.label }}</span>
            <!-- <img
              src="@/assets/images/cancel.png"
              @click="$func.removeEle(checkedRoleList, item, 'roleId')"
            /> -->
          </li>
        </ul>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:visible', false)">取 消</el-button>
      <el-button type="primary" @click="saveDialog">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import mixins from './mixins'
import preload from '@/plugins/preload'
export default {
  mixins: [mixins],
  props: ['visible', 'data', 'isDepartment', 'parent'],
  watch: {
    filterText (val) {
      this.$refs.treeA.filter(val)
    },
    visible (val) {
      this.visibleDialog = this.visible
      if (val) {
        this.activeName = '1'
      }
    },
    visibleDialog (val) {
      this.$emit('update:visible', val)
    }
  },
  computed: {
    total () {
      return this.checkedRoleList.length
    }
  },
  data () {
    return {
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      defaultCheckedKeys: [],
      checkedRoleList: [],
      checkedEmployessList: [],
      checkedDepartmentList: [],
      checkedleLsit: []
    }
  },
  methods: {
    //判断数组中是否包含某个值
    findElem (array, attr, val) {
      for (var i = 0; i < array.length; i++) {
        if (array[i][attr] == val) {
          return true //返回当前索引值
        }
      }
      return false
    },
    // 节点选中状态发生变化时的回调
    handleCheckChange (data, checked, indeterminate) {
      //过滤掉节点未被选中项
      if (!checked) {
        //取消选中时删除对应数组的项
        for (let i in this.checkedRoleList) {
          if (this.checkedRoleList[i].id == data.id) {
            this.checkedRoleList.splice(i, 1)
          }
        }
      } else {
        //判断选中列表中是否存在这个值，不存在的话push
        if (!this.findElem(this.checkedRoleList, 'id', data.id)) {
          this.checkedRoleList.push(data)
        }
      }
    },

    handleCurrentChange (val) {
      this.page.currentPage = val
      this.getMemberList()
      let namelist = []
      for (let i = 0; i < this.checkedRoleList.length; i++) {
        namelist.push(this.checkedRoleList[i].id)
      }
      this.$refs.treeA.setCheckedKeys(namelist)
    },
    handleClick () {
      let parent = JSON.parse(JSON.stringify(this.parent))
      this.checkedRoleList = parent.map(item => ({
        label: item.name,
        id: item.targetId
      }))
      let namelist = []
      for (let i = 0; i < parent.length; i++) {
        namelist.push(parent[i].targetId)
      }
      this.$nextTick(() => {
        this.$refs.treeA.setCheckedKeys(namelist)
      })
    },
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    currentChecked (nodeObj, SelectedObj) {
      // this.checkedleLsit = this.checkedleLsit.concat(SelectedObj.checkedNodes)
      // let obj = {}
      // let peon = this.checkedleLsit.reduce((cur, next) => {
      //   obj[next.id] ? '' : (obj[next.id] = true && cur.push(next))
      //   return cur
      // }, [])
      // var c = peon.filter(item => this.checkedleLsit.includes(item))
      // console.log(c)
      // this.checkedRoleList = c
      // ***************************************
      // this.checkedleLsit = SelectedObj.checkedNodes
      // this.checkedRoleList = this.checkedleLsit
    },
    saveDialog () {
      let transferList = this.checkedRoleList.map(item => ({
        name: item.label,
        targetId: item.id
      }))
      this.$emit('change', transferList)
    },
    delList () {
      this.checkedleLsit = []
      this.checkedRoleList = []
      this.$refs.treeA.setCheckedKeys([])
    }
  },
  mounted () {
    this.getMemberList()
  }
}
</script>

<style lang="scss" scoped>
.el-tree {
  min-height: 300px;
}
.pagination-el {
  padding-top: 20px;
}
.check_box .active {
  background: url('../../image/success.png') no-repeat 50%;
  background-position: 0px;
  color: #3195f8;
  // background: red;
}
.check_box a:before {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid #dcdfe6;
  border-radius: 2px;
  left: 0;
  top: 1px;
  content: '';
}
.promoter_person {
  .person_body {
    display: flex;
    border: 1px solid #f5f5f5;
    // height: 500px;
    .person_tree {
      padding: 10px 12px 0 8px;
      width: 350px;
      height: 100%;
      border-right: 1px solid #f5f5f5;
      input {
        padding-left: 25px;
        width: 210px;
        height: 30px;
        font-size: 12px;
        border-radius: 2px;
        border: 1px solid #d5dadf;
        background: url(~@/assets/images/list_search.png) no-repeat 10px center;
        background-size: 14px 14px;
        margin-bottom: 14px;
      }
      ul {
        height: 420px;
        overflow-y: auto;
        .check_box {
          padding: 5px 0;
          a {
            font-size: 12px;
            position: relative;
            padding-left: 20px;
            margin-right: 30px;
            cursor: pointer;
            white-space: pre;
          }
          i {
            float: right;
            padding-left: 24px;
            padding-right: 10px;
            color: #3195f8;
            font-size: 12px;
            cursor: pointer;
            background: url(~@/assets/images/next_level_active.png) no-repeat
              10px center;
            border-left: 1px solid rgb(238, 238, 238);
          }
          a.active + i {
            color: rgb(197, 197, 197);
            background-image: url(~@/assets/images/next_level.png);
            pointer-events: none;
          }
        }
      }
      .tree_nav {
        margin: 0;
        padding: 0;
        span {
          margin-left: 25px;
          display: inline-block;
          padding-right: 10px;
          margin-right: 5px;
          max-width: 6em;
          color: #38adff;
          font-size: 12px;
          cursor: pointer;
          background: url(~@/assets/images/jiaojiao.png) no-repeat right center;
        }
        span:last-of-type {
          background: none;
        }
      }
      img {
        width: 14px;
        vertical-align: middle;
        margin-right: 5px;
      }
    }
    .has_selected {
      width: 276px;
      height: 100%;
      font-size: 12px;
      p {
        padding-left: 19px;
        padding-right: 20px;
        line-height: 37px;
        border-bottom: 1px solid #f2f2f2;
        a {
          float: right;
          color: #3296fa;
        }
      }
      ul {
        height: 460px;
        li {
          margin: 11px 26px 13px 19px;
          line-height: 17px;
          span {
            vertical-align: middle;
          }
          img:first-of-type {
            width: 14px;
            vertical-align: middle;
            margin-right: 5px;
          }
          img:last-of-type {
            float: right;
            margin-top: 2px;
            width: 14px;
          }
        }
      }
    }
  }
}
</style>
